<template>
  <div>

    <div class="row">
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>新增设备信息
              </div>
            
              <div class="cz">

                <button id="sample_editable_1_new" class="btn green" data-toggle="modal" href="#responsive">新增 <i class="fa fa-plus"></i></button>
                <button id="sample_editable_1_new" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i>
                

                </button>
                <div class="btn-group pull-right ">
                      <button class="btn dropdown-toggle" data-toggle="dropdown">工具 <i class="fa fa-angle-down"></i>
                      </button>
                      <ul class="dropdown-menu pull-right style">
                        <li>
                          <a href="javascript:;">
                          打印 </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                          另存为PDF </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                          导出为Excel </a>
                        </li>
                      </ul>
                    </div>
              </div>

            </div>
            <div class="portlet-body">
            
              <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                <thead>
                  <tr>
                    <th class="table-checkbox">
                      <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/> 全选
                    </th>
                    <th>
                       序号
                    </th>
                    <th>
                       设备房编号
                    </th>
                    <th>
                       设备房名称
                    </th>
                    <th>
                       地址
                    </th>
                    <th>
                       所属小区
                    </th>
                  
                    <th>
                       设备数量
                    </th>
                    <th>
                       设备房状态
                    </th>
                     <th>
                       功能操作
                    </th>
                  </tr>
                </thead>
                <tbody>
                <tr class="odd gradeX" v-for="(item,index) in list">
                  <td>
                    <input type="checkbox" class="checkboxes" value="1" @click="checkT(item,index)"/>
                  </td>
                  <td>
                     {{item.number}}
                  </td>
                  <td>
                    {{item.bh}}
                  </td>
                  <td>
                     {{item.mc}}
                  </td>
                  <td class="center">
                     {{item.address}}
                  </td>
                 <td>
                     {{item.xq}}
                  </td>
                  <td>
                    {{item.sb}}
                  </td>
                  <td v-if="item.type==1">
                     启用
                  </td>
                  <td v-if="item.type==0">
                     停用
                  </td>
                  <td>
                    <a style="color:#5b9bd1" class="infor">详情</a> |
                    <a style="color:#5b9bd1" class="edit">编辑</a> |
                    <a style="color:#5b9bd1" data-toggle="modal"  href="#delete" class="delete" @click="deleteData(index,item,$event)">删除</a>
                  </td>
                </tr>
              
                </tbody>
              </table>
              <!-- 新增设备信息开始 -->
              <div id="responsive" class="modal fade" tabindex="-1" data-width="760">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                  <h4 class="modal-title">新增员工</h4>
                </div>
                <div class="modal-body">
                  <div class="row">
                    <div class="col-md-offset-3 col-md-6">

                      <p>
                        <span></span>
                        <input class="form-control" placeholder="请输入员工姓名" type="text">
                      </p>
                      <p>
                        <input class="form-control" placeholder="请输入员工邮箱" type="text">
                      </p>
                      <p>
                        <input class="form-control" placeholder="请输入员工次数" type="text">
                      </p>
                    </div>

                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
                  <button type="button" class="btn blue">保存</button>
                </div>
              </div>              
              <!-- 新增设备信息结束 -->
             
              <!-- 确定删除弹框开始 -->
              <div id="delete" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false" data-attention-animation="false">
                <div class="modal-body">
                  <p>
                     确定删除?
                  </p>
                </div>
                <div class="modal-footer">
                  <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                  <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
                </div>
              </div>
                
              <!-- 确定删除弹框结束 -->

            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>

  </div>

</template>  

<style scoped>
  .cz{float: right;width: 256px;position: relative;top: 3px;left: 5px;}
  @media (max-width: 768px){
    .cz{float:left;margin-bottom: 15px;}
  }
    p {margin: 0 0 10px;}
     table tr td{text-align: center;vertical-align: middle;}
</style>

<script>
  import '../../../../static/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js';
  import '../../../../static/global/plugins/bootstrap-modal/js/bootstrap-modal.js';

//   import '../../../static/global/plugins/bootstrap-daterangepicker/moment.min.js';
//   import '../../../static/global/plugins/bootstrap-daterangepicker/daterangepicker.js';
//   import '../../../static/global/plugins/fullcalendar/fullcalendar.js';

  import '../../../../static/global/plugins/jquery-multi-select/js/jquery.multi-select.js';

  import '../../../../static/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js';
  import '../../../../static/global/plugins/bootstrap-select/bootstrap-select.js';
  import '../../../../static/global/plugins/select2/select2.min.js';
  import '../../../../static/global/plugins/datatables/media/js/jquery.dataTables.min.js';
  import '../../../../static/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js';
  //highcharts插件
  import '../../../../static/global/plugins/highcharts.js';

  import Metronic from '../../../../static/global/js/metronic.js'

  // import '../../../../static/js/layout/quick-sidebar.js';
  // import '../../../../static/js/layout/demo.js';
  // import '../../../../static/js/pages/index.js';
  // import '../../../../static/js/pages/tasks.js';

  import TableManaged from '../../../../static/js/pages/table-managed.js';
  import '../../../../static/js/pages/components-pickers.js';
  import '../../../../static/js/pages/components-dropdowns.js';
  import '../../../../static/js/pages/ui-extended-modals.js';

  import Headers from '../../../components/Headers.vue';
  import Bars from '../../../components/Bars.vue';
  import Foot from '../../../components/Foot.vue';
   
  import optVue from '../../../config/optVue.js';
  import {setStore,getStore,removeStore} from '../../../config/common.js';
  export default {
     data(){
      return{
        list:[],
        data:null,
        dataId:null,  
        index:null,
        title:""
      }
    },
  	components: {
  	    Headers,Bars,Foot
    },
    mounted(){
      document.title = '设备房管理';
      this.title = document.title
      $(".backstretch").remove();
      optVue.sbfgl(this);

      $(function(){
      TableManaged.init();

        var element = $(".page-sidebar-menu>li").eq(7).children(".sub-menu").children("li").eq(9).children(".sub-menu").children("li").eq(getStore("childElement"));
        element.parent(".sub-menu").css({"display":"block"});
        element.parent(".sub-menu").parent("li").addClass("open");
        element.parent(".sub-menu").parent("li").parent(".sub-menu").css({"display":"block"});
        element.parent(".sub-menu").parent("li").parent(".sub-menu").parent("li").addClass("open");
      })
    },
    methods:{
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      
      },
      sureDelete:function(event){
     
         this.list.splice(this.index, 1);
       //optVue.sbfgl(this);
      },
      
      allDelete:function(event){
        console.log($(".checkboxes").is(':checked'))
       if($(".checkboxes").is(':checked')){
          
        }
      },
      checkT:function(data,index){
        
      }
    }

  }

</script>  



